<template>
  <div>
      <img id='avatar'></div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: "canvass",
  data() {
    return {};
  },
  methods: {
    generateCanvas() {
      var canvas = document.createElement("canvas");
      canvas.width = 500;
      canvas.height = 700;
      var context = canvas.getContext("2d");

      context.rect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "#fff";
      context.fill();

      var myImage = new Image();
      myImage.src = require("./../assets/logo2.png"); //背景图片  你自己本地的图片或者在线图片
      myImage.crossOrigin = "Anonymous";

      myImage.onload = function () {
        context.drawImage(myImage, 0, 0, 500, 700);

        context.font = "60px Courier New";
        context.fillText("我是文字", 350, 450);

        var myImage2 = new Image();
        myImage2.src = require("./../assets/code.png"); //你自己本地的图片或者在线图片
        myImage2.crossOrigin = "Anonymous";

        myImage2.onload = function () {
          context.drawImage(myImage2, 175, 175, 225, 225);
          var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
          var img = document.getElementById("avatar");

          // document.getElementById('avatar').src = base64;
          img.setAttribute("src", base64);
        };
      };
    },

     getFormatDayDate (time) {
    let timeStr = ''
    let currentTime = new Date().getTime();
    let newTime = moment(time).toDate().getTime();
    let distanceDate = parseInt((currentTime - newTime) / (1 * 24 * 60 * 60 * 1000));
    switch (distanceDate) {
      case 0:
        timeStr = '今天';
        break;
      case 1:
        timeStr = '昨天';
        break;
      case 2:
        timeStr = '前天';
        break;
      case 3:
        timeStr = '3天前';
        break;
      case 4:
        timeStr = '4天前';
        break;
      case 5:
        timeStr = '5天前';
        break;
      case 6:
        timeStr = '6天前';
        break;
      default:
        timeStr = moment(time).format('YYYY-MM-DD')
        break;
    }
    return timeStr
  },
  },

  components: {},
  mounted() {

    // this.generateCanvas();
  },
};
</script>
<style scoped lang="scss">
</style>